<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue';

import { useRouter } from "vue-router";
import { getMenus } from "@/router/grants";
import {useMenus} from "@/stores/menus"

const $router = useRouter();

const exitSystem = () => {

  sessionStorage.removeItem("token");
  sessionStorage.removeItem("username");
  sessionStorage.removeItem("checkedKeys");

  $router.push("/Login");
}

// 权限菜单
const menusStore = useMenus();
if(menusStore.menus.length==0){//判断pinia中有没有存储菜单。
  console.log("pinia没有");  
  menusStore.addMenus(getMenus($router));
}

</script>

<template>
  <div class="common-layout">
    <el-container class="box">
      <el-aside width="200px">
        <h1 class="title">HAIGOU_ADMIN</h1>
        <!-- el-menu: 菜单容器 -->
        <el-menu :router="true" active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
          default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
          <template v-for="item in menusStore.menus">

            <el-sub-menu v-if="item.children" :index="item.key">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>{{item.label}}</span>
              </template>
              <el-menu-item v-for="sonItem in item.children" :index="'/Admin/'+sonItem.path">
                <el-icon>
                  <Document />
                </el-icon>
                {{sonItem.label}}
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item v-else :index="'/Admin/' + item.path">
              <el-icon>
                <Document />
              </el-icon>
              {{ item.label }}
            </el-menu-item>

          </template>
         
        </el-menu>
      </el-aside>
      <el-container class="right-box">
        <el-header>
          <el-button @click="exitSystem">退出</el-button>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout,
.box {
  width: 100%;
  height: 100%;
}

.title {
  height: 50px;
  background-color: rgb(24, 24, 70);
  color: white;
  text-align: center;
  line-height: 50px;
}

.el-aside {
  width: 250px;
  height: 100%;
  background-color: #545c64;
}

.right-box {
  width: calc(100% -250px);
  height: 100%;
}

.el-header {
  width: 100%;
  height: 120px;
  background-color: skyblue;
}

.el-main {
  width: 100%;
  height: calc(100% - 120px);
  background-color: gray;
}
</style>
